<template>
    <div class="wrap">
        <h1 class="title"><span class="gradient-text">音色管理</span></h1>

        <!-- 新增/编辑 -->
        <div class="editor-card">
            <el-form :model="form" label-width="100px">
                <el-form-item label="名称">
                    <el-input v-model="form.name" placeholder="如：温柔女声" />
                </el-form-item>
                <el-form-item label="编码">
                    <el-input v-model="form.code" placeholder="例：xiaoyan" clearable>
                        <template slot="prepend">官方编码</template>
                    </el-input>
                    <div class="tip">格式：小写字母 + 数字，例：xiaoyan、xiaoyu、xiaomei</div>
                </el-form-item>
                <el-form-item label="速度">
                    <el-slider v-model="form.speed" :min="0" :max="100" />
                </el-form-item>
                <el-form-item label="音量">
                    <el-slider v-model="form.volume" :min="0" :max="100" />
                </el-form-item>
                <el-form-item label="音调">
                    <el-slider v-model="form.pitch" :min="0" :max="100" />
                </el-form-item>
                <el-button type="primary" class="m-t full" @click="save">保存</el-button>
            </el-form>
        </div>

        <!-- 列表 -->
        <div class="list-card">
            <h3>音色列表</h3>
            <el-table :data="list" stripe style="width: 100%">
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="code" label="编码" />
                <el-table-column prop="speed" label="速度" />
                <el-table-column prop="volume" label="音量" />
                <el-table-column prop="pitch" label="音调" />
                <el-table-column label="默认" width="80">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isDefault" type="success">默认</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="220">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="primary" @click="setDefault(scope.row.id)">设为默认</el-button>
                        <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination background layout="prev, pager, next" :total="total" :page-size="size" :current-page="current"
                @current-change="loadPage" class="m-t" />
        </div>
    </div>
</template>
  
<script>
import {
    getVoicePage,
    getVoiceDropdown,
    addVoice,
    updateVoice,
    deleteVoice,
    setDefaultVoice
} from '../../api/index'

export default {
    name: 'VoiceManager',
    data() {
        return {
            form: this.emptyForm(),
            voiceEnum: [], // 官方音色下拉
            list: [],
            total: 0,
            current: 1,
            size: 10
        }
    },
    created() {
        this.loadDropdown()
        this.loadPage()
    },
    methods: {
        emptyForm() {
            return { name: '', code: '', speed: 50, volume: 50, pitch: 50 }
        },
        loadDropdown() {
            getVoiceDropdown().then(res => {
                this.voiceEnum = res.data.map(v => ({ code: v.code, desc: v.name }))
            })
        },
        loadPage(current = 1) {
            this.current = current
            getVoicePage(current, this.size).then(res => {
                this.list = res.data.records
                this.total = res.data.total
            })
        },
        save() {
            const api = this.form.id ? updateVoice : addVoice
            api(this.form).then(() => {
                this.$message.success('保存成功')
                this.form = this.emptyForm()
                this.loadPage()
            })
        },
        edit(row) {
            this.form = { ...row }
        },
        setDefault(id) {
            setDefaultVoice(id).then(() => {
                this.$message.success('已设为默认')
                this.loadPage()
            })
        },
        del(id) {
            this.$confirm('确认删除？', '提示', { type: 'warning' }).then(() => {
                deleteVoice(id).then(() => {
                    this.$message.success('已删除')
                    this.loadPage()
                })
            })
        }
    }
}
</script>
  
<style scoped>
.list-card {
    margin-top: 40px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.18);
}

.m-t {
    margin-top: 20px;
}


.tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}
</style>